
<template>
    <div class="">
        <Breadcrumb :route="routes" />
        <!-- <formPage @submit="handleBaseSubmit" />
        <Action :options="options" @addClick="handleAddFun"></Action> -->
        <el-dialog v-model="dialogTableVisible" title="Shipping address">
            <el-table :data="gridData">
                <el-table-column property="date" label="Date" width="150" />
                <el-table-column property="name" label="Name" width="200" />
                <el-table-column property="address" label="Address" />
            </el-table>
        </el-dialog>
        <div class="menuPower">
            <div class="treeClass">
                <div class="headerBtn">
                    <el-button @click="defaultExpandAll(isExpandAll)">{{ isExpandAll ? '折叠' : '展开' }}</el-button>
                    <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll"
                        @change="handleCheckAllChange(checkAll)" style="padding:0px;margin-right:5px;">
                        全选</el-checkbox>
                </div>
                <el-tree :data="menuTreeList" show-checkbox node-key="id" :props="defaultProps"
                    :default-expand-all="isExpandAll" ref="treeRef" :check-strictly="strictly"
                    @check-change="handelCheckChangeFun" />
                <div class="submitRoleMenu">
                    <el-button @click="submit">确定</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import { useRoute } from "vue-router";
import Breadcrumb from '@/components/nav-header'
import formPage from "@/components/form";
import Action from "@/components/action";
import { menuList } from '@/utlis/mock'
import { getRoleMenu, roleSystem } from '@/api/role/index'
import { MenuList } from "@/api/menu";
import { result } from "lodash";

const route = useRoute()
const routes = ref()
const menuTreeList = ref([])
const isExpandAll = ref(true)
const strictly = ref(false)
const selectAll = ref(true)
const listId = ref(null)
const treeRef = ref()
const idList = ref([])
const dialogTableVisible = ref(false)
const checkedKey = ref([])

let checkAll = ref(false) //全选按钮的绑定值
let isIndeterminate = ref(false) //全选按钮的全选，半选样式 

const options = reactive({
    shuaxinDisplay: true,
    addDisplay: true,
    editDiaplay: true,
    removeDisplay: true,
    caozuoDisplay: true,
    qiehuanDisplay: true,
    sousuoDisplay: true
})

onMounted(() => {
    routes.value = route.matched
    // getRoleList()
    getAllMeun()
    console.log(menuTreeList.value);
})
const getAllMeun = async () => {
    const result = await MenuList().then(r => {
        const { code, data } = r
        if (code == 200) {
            console.log(data, '全部菜单');
            menuTreeList.value = getMenuId(data)
            console.log(menuTreeList.value);
        }
    })
}
function getMenuId(list) {
    let result = list.map(item => ({
        label: item.name,
        id: item.id,
        pid: item.pid,
        children: item.children ? getMenuId(item.children) : null
    }))
    return result
}
//获取角色的权限
const getRoleList = async () => {
    const List = await getRoleMenu(54).then(r => {
        const { code, data } = r
        if (code == 200) {
            console.log(data, '获取到的角色权限');
            let pushList = []
            const tilelistFun = (list) => {
                list.forEach(element => {
                    pushList.push(element)
                    element.children ? tilelistFun(element.children) : null
                });
            }
            tilelistFun(data)
            let roleId = getMenuId(data)
            treeRef.value.setCheckedNodes(pushList)
        }
    })
}
//设置角色权限
const setRoleFun = async (params) => {
    const setRes = await roleSystem({ id: 54, menu_ids: params }).then(result => {
        const { code, data } = result
        if (code == 200) {
            console.log(data, '权限分配的结果');
        }
    })
}

const handleAddFun = () => {
    console.log('----------------');
    dialogTableVisible.value = true
}

const handleBaseSubmit = (model) => {
    console.log(model, '传递过来的数据');
}

const defaultExpandAll = (expand) => {
    isExpandAll.value = !expand
    const treeList = menuTreeList.value
    for (let i = 0; i < treeList.length; i++) {
        treeRef.value.store.nodesMap[treeList[i].id].expanded =
            isExpandAll.value;
    }
}
const defaultProps = {
    children: 'children',
    label: 'label',
}
const handleCheckAllChange = (val) => {
    console.log(val);
    strictly.value = true
    if (val) {
        treeRef.value.setCheckedNodes(menuTreeList.value)
        let selectAllId = treeRef.value.getCheckedNodes()
        console.log(selectAllId, '全部的菜单节点');
        function getAllSelectId(data) {
            let idData = []
            for (let i = 0; i < data.length; i++) {
                idData.push(data[i].id)
                data[i].children ? getAllSelectId(data[i].children) : null
            }
            return idData
        }
        listId.value = getAllSelectId(selectAllId)
        console.log(listId.value, '所有的id');

    } else {
        treeRef.value.setCheckedNodes([])
    }
}

const getmenuTreeListIdLen = (list) => {
    for (let j = 0; j < list.length; j++) {
        idList.value.push(list[j].id)
        if (list[j]?.children) {
            getmenuTreeListIdLen(list[j].children)
        }
    }
}
const handelCheckChangeFun = () => {
    strictly.value = true
}
const submit = () => {
    let arr = treeRef.value.getCheckedKeys();//选中节点的ID
    // let arr1 = treeRef.value.getHalfCheckedKeys(); //半选的ID
    // let permissionId = arr.concat(arr1);
    console.log(arr);
    return
    setRoleFun(arr)
}

const gridData = [
    {
        date: '2016-05-02',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
        date: '2016-05-04',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
        date: '2016-05-01',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
    {
        date: '2016-05-03',
        name: 'John Smith',
        address: 'No.1518,  Jinshajiang Road, Putuo District',
    },
]
</script>

<style lang="less" scoped>
.fontClass {
    font-family: 'Regular';
    color: #000;
    font-size: 14px;
    letter-spacing: 1px;
}

.menuPower {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;

    .treeClass {
        width: 60%;
        min-height: 800px;
        background-color: #fff;
        padding: 10px;
        margin: 20px;

        .el-tree {
            margin-top: 10px;
        }
    }
}

.headerBtn {
    padding: 0 20px 10px 20px;
    border-bottom: 1px solid #f0f0f0;

    .el-button {
        margin-right: 20px;
        background-color: #FBC125;
        color: #fff;
    }
}

.submitRoleMenu {
    padding: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .el-button {
        background-color: #3CB731;
        color: #ffffff;
    }
}

.power {
    padding: 20px;
}

.checkbox {
    display: flex;

    div {
        margin-left: 20px;
    }
}

:deep(.el-tree-node.is-expanded>.el-tree-node__children .el-tree-node.is-expanded>.el-tree-node__children) {
    display: flex;
}
</style>